/*
 * @Description: 登记
 * @Author: Zzt
 * @Date: 2022-11-11 14:52:39
 * @LastEditTime: 2023-01-18 10:08:29
 */
import VisualizationMain from '@/components/DataVisualization/VisualizationMain';
import Nav from '@/components/Nav';
import { Tabs } from 'antd';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import classNames from 'classnames/bind';
import { useEffect, useState } from 'react';
import styles from '../styles/register.module.scss';
import { useRegisterContext } from '../contexts/RegisterContext';
const { TabPane } = Tabs;
const cx = classNames.bind(styles);

const according = [
  { fondName: '按时间', id: 0 },
  { fondName: '按保管期限', id: 1 },
  { fondName: '按登记人', id: 2 },
  { fondName: '按档案类型', id: 3 },
  { fondName: '按档案分类', id: 4 }
];
const segmentedList = [
  { label: '登记次数', value: 'registerNo' },
  { label: '卷数', value: 'folders' },
  { label: '件数', value: 'files' },
  { label: '电子文件数', value: 'eFiles' },
  { label: '容量', value: 'dataSizes' }
];
const table = [
  { title: '年度', dataIndex: 'yearName', key: 'yearName' },
  { title: '登记次数', dataIndex: 'registerNo', key: 'registerNo' },
  { title: '卷数', dataIndex: 'folders', key: 'folders' },
  { title: '件数', dataIndex: 'files', key: 'files' },
  { title: '电子文件数', dataIndex: 'eFiles', key: 'eFiles' },
  { title: '容量GB', dataIndex: 'dataSizes', key: 'dataSizes' }
];
const RegisterWarp = () => {
  const { setChartData, setTableData, dataList, chartList } = useRegisterContext();
  const [limit, setLimit] = useState<any>({});
  const [segmented, setSegmented] = useState('registerNo');
  const [fondValue, setFondValue] = useState({});
  // 选中的按照类型
  const [type, setType] = useState(0);
  const [options, setOptions] = useState([]);
  const [visibleData, setVisibleData] = useState([]);
  const [condition, setCondition] = useState(<></>);
  const [tableList, setTableList] = useState(table);
  const [xData, setXData] = useState([]);
  const [yData, setYData] = useState([]);
  const [listQuery, setListQuery] = useState({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  /**
   * @description: 切换全宗
   * @param {number} val 选中的全宗
   */
  const handleAccordingChange = (val: any) => {
    console.log(val);
    setType(parseInt(val, 10));
  };
  const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
  };

  useEffect(() => {
    const param = { ...limit, type, ...fondValue };
    setChartData({ ...param });
    setListQuery((state) => {
      return { ...state, pageNo: 1 };
    });
  }, [limit, type, fondValue]);
  useEffect(() => {
    const param = { ...limit, type, ...fondValue };
    setTableData({ ...listQuery, param });
  }, [limit, type, fondValue, listQuery]);
  useEffect(() => {
    setVisibleData(dataList);
    setYData(chartList.map((item: any) => item.name));
    setXData(chartList.map((item: any) => item[segmented]));
  }, [dataList, chartList, segmented]);

  const onChangeNav = (value: any) => {
    setFondValue(value);
  };
  const ChangNo = (num: any) => {
    console.log('num', num);
    setListQuery((state) => {
      return { ...state, pageNo: num };
    });
  };
  useEffect(() => {
    const removed = table.slice(0);
    if (type === 0) {
      removed.splice(
        1,
        0,
        { title: '全宗', dataIndex: 'fondsName', key: 'fondsName' },
        { title: '档案类型', dataIndex: 'archiveTypeName', key: 'archiveTypeName' },
        { title: '保管期限', dataIndex: 'retentionPeriod', key: 'retentionPeriod' }
      );
      setTableList(removed);
      setOptions([
        {
          title: '保管期限',
          name: 'retentionPeriod',
          checkList: [
            { value: 10, label: '10年' },
            { value: 15, label: '15年' },
            { value: 30, label: '30年' },
            { value: 100, label: '永久' }
          ]
        }
      ]);
      setCondition(<Nav onChangeNav={onChangeNav} />);
    }
    if (type === 1) {
      removed.splice(0, 0, {
        title: '保管期限',
        dataIndex: 'retentionPeriod',
        key: 'retentionPeriod'
      });
      removed.splice(
        2,
        0,
        { title: '全宗', dataIndex: 'fondsName', key: 'fondsName' },
        { title: '档案类型', dataIndex: 'archiveTypeName', key: 'archiveTypeName' }
      );
      setTableList(removed);
      setCondition(<Nav onChangeNav={onChangeNav} />);
      setOptions([
        {
          title: '保管期限',
          name: 'retentionPeriod',
          checkList: [
            { value: 10, label: '10年' },
            { value: 15, label: '15年' },
            { value: 30, label: '30年' },
            { value: 100, label: '永久' }
          ]
        }
      ]);
    }
    if (type === 2) {
      removed.splice(0, 0, { title: '登记人', dataIndex: 'registrant', key: 'registrant' });
      setTableList(removed);
      setCondition(<Nav onChangeNav={onChangeNav} />);
      setOptions([
        {
          title: '登记人',
          name: 'registrants',
          checkList: [
            { value: 1, label: '登记人1' },
            { value: 2, label: '登记人2' },
            { value: 3, label: '登记人3' },
            { value: 4, label: '登记人4' },
            { value: 5, label: '登记人5' }
          ]
        }
      ]);
    }
    if (type === 3) {
      removed.splice(
        0,
        0,
        { title: '全宗', dataIndex: 'fondsName', key: 'fondsName' },
        { title: '档案类型', dataIndex: 'archiveTypeName', key: 'archiveTypeName' }
      );
      setTableList(removed);
      setCondition(<Nav onChangeNav={onChangeNav} />);
      setOptions([]);
    }
    if (type === 4) {
      removed.splice(
        0,
        0,
        { title: '全宗', dataIndex: 'fondsName', key: 'fondsName' },
        { title: '档案类型', dataIndex: 'archiveTypeName', key: 'archiveTypeName' },
        { title: '分类', dataIndex: 'category', key: 'category' }
      );
      setTableList(removed);
      setCondition(<Nav onChangeNav={onChangeNav} />);
      setOptions([
        {
          title: '档案分类',
          name: 'categorys',
          checkList: [
            { value: 1, label: '分类1' },
            { value: 2, label: '分类2' },
            { value: 3, label: '分类3' },
            { value: 4, label: '分类4' },
            { value: 5, label: '分类5' }
          ]
        }
      ]);
    }
  }, [type]);
  /* 改变年触发 */
  const onChangeYear = (value: any) => {
    setLimit(value.chioce);
    setSegmented(value.segmentValue);
  };
  return (
    <>
      <Tabs tabPosition="left" className={cx('tab')} onTabClick={handleAccordingChange}>
        {according.map((item) => (
          <TabPane tab={<>{item.fondName}</>} key={item.id}>
            <VisualizationMain
              getList={setTableData}
              type={item.fondName}
              condition={condition}
              segmented={segmentedList}
              tableList={tableList}
              choiceList={options}
              data={{ visibleData, xData, yData }}
              onChange={onChangeYear}
              ChangNo={ChangNo}
            />
          </TabPane>
        ))}
      </Tabs>
    </>
  );
};
export default RegisterWarp;
